<template>
  <dtDialog
    :title="textMap[dialogStatus]"
    :visible.sync="themeVisible"
    :is-loading="loading"
    @closeDialog="resetThemeTemp"
    @comfirmBtn="submit"
  >
    <el-form
      ref="themeDataForm"
      slot="content"
      :rules="themeRules"
      :model="themeTemp"
      label-position="right"
      label-width="82px"
    >
      <el-form-item label="主题名称" prop="themeName">
        <el-input v-model.trim="themeTemp.themeName" :disabled="dialogStatus=='update' && themeTemp.themeId =='1477272515573542913'" :autosize="{ minRows: 3, maxRows: 4}"
                  maxlength="100" placeholder="请输入主题名称" type="textarea"
                  show-word-limit class="limit" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model.trim="themeTemp.remark" :autosize="{ minRows: 4, maxRows: 5}" maxlength="200"
                  type="textarea" placeholder="请输入备注" show-word-limit
                  class="limit" />
      </el-form-item>
    </el-form>
  </dtDialog>
</template>
<script>
import themeApi from '@/framework/api/themeManage'

export default {
  data() {
    return {
      loading: false,
      textMap: {
        update: '修改主题',
        create: '新增主题'
      },
      themeVisible: false,
      themeRules: {
        themeName: [
          { required: true, message: '请输入主题名称', trigger: 'change' }
        ]
      },
      themeTemp: {
        themeName: '',
        remark: ''
      },
      dialogStatus: ''
    }
  },
  methods: {
    handleTheme(row, type) {
      if (type == 'create') {
        this.dialogStatus = 'create'
      } else {
        this.dialogStatus = 'update'
        themeApi.detail({ themeId: row.themeId }).then((res) => {
          this.themeTemp = res.data
        })
      }
      this.$nextTick(() => {
        this.$refs['themeDataForm'].clearValidate()
      })
      this.themeVisible = true
    },
    resetThemeTemp() {
      this.themeTemp = {}
      this.$refs.themeDataForm.resetFields()
    },
    submit() {
      this.$refs.themeDataForm.validate((valid) => {
        if (valid) {
          this.loading = true
          try {
            if (this.dialogStatus == 'create') {
              themeApi.add(this.themeTemp).then((res) => {
                this.$dtMessage({
                  title: '成功',
                  message: '新增成功',
                  type: 'success',
                  duration: 2000
                })
                this.themeVisible = false
                this.$parent.getList()
              })
            } else {
              themeApi.edit(this.themeTemp).then((res) => {
                this.$dtMessage({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                })
                this.themeVisible = false
                this.$parent.getList()
              })
            }
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>
